%main-comment {
  position: relative;
  display: block;
  margin-top: 20px;
  padding: 0;
}

// 评论列表
#blog-comments-placeholder {
  @extend %main-comment;

  border-top: 2px solid var(--divider-light);

  #comment_pager_top,
  #comment_pager_top ~ br {
    @extend [hidden];
  }

  .feedback_area_title {
    display: inline-block;
    width: 100%;
    padding: 1rem 0 0.5rem;
    margin: 0;
    font-size: 1.4em;
    background-image: none;
  }

  .feedbackItem {
    position: relative;
    margin-top: 10px;
    padding: 10px 15px 10px 80px;
    background-color: rgba(0,0,0,.04);

    .dark & {
      background-color: rgba(0,0,0,.15);
    }

    .feedbackListSubtitle {
      padding-bottom: 5px;
    }

    .feedbackManage {
      position: absolute;
      right: 15px;
      min-width: 150px;
      text-align: right;

      a > span {
        color: var(--fg);
      }

      @media (max-width: 768px) {
        right: auto;
        bottom: 10px;
        left: -33px;
        font-size: 12px;
      }
    }

    .feedbackCon {
      a > span {
        color: $color-text-aux;
      }

      .blog_comment_body {
        padding: 10px 0;
      }

      .comment_vote {
        font-size: 12px;
      }
    }

    .blackcat-avatar {
      position: absolute;
      top: 15px;
      left: 15px;
      width: 48px;
      transition: border-color .3s ease-out;
    }

    a:hover > .blackcat-avatar {
      border-color: $color-primary
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

// 评论表单
#comment_form {
  --gap: 1rem;

  @extend %main-comment;
  margin-left: 0;

  #tbCommentAuthor {
    width: 40%;
    min-width: 2em;
    background-image: none;
    // @extend %input;
  }

  #tbCommentBody {
    width: 100%;
    height: 12.5rem;
    font-family: inherit;
    background: none;
    resize: none;
  }

  #tbCommentBodyPreview {
    margin: 0;
    height: 12.5rem;
  }

  #divCommentShow {
    .comment_my_posted {

      > img {
        @extend template;
      }

      .bq_post_comment {
        margin: 20px 0;
        padding: 20px 1em;
        border: 0;

        p {
          margin: 0 0 7px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  #comment_nav {
    padding-bottom: 10px;
    display: none;

    a {
      // @extend %button;
      // @extend %button-btn;
      // @extend %button-btn-ghost;

      margin: 0 0 0 .5em;
    }
  }

  &_container {
    // border-bottom: 2px solid var(--divider-light);
    // padding-bottom: var(--gap);

    #commentform_title {
      display: inline-block;
      width: 100%;
      padding: var(--gap) 0 var(--gap);
      margin: 0;
      font-size: 1.4em;
      background-image: none;
    }

    .comment_textarea {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0;
      padding: var(--gap);
      border-radius: 0;
      // border: none;
      border: 1px solid var(--divider);
      border-bottom-width: 0;
      // background-color: rgba(0,0,0,.04);
      background-color: rgba(0,0,0,0);

      // .dark & {
      //   background-color: rgba(0,0,0,.15);
      // }

      .commentbox_title {
        padding-bottom: 0.5em;
        // border-bottom-color: var(--divider-dark);
        border-bottom-color: var(--divider);

        .commentbox_title_right {
          margin-bottom: 0;
        }
      }

      .commentbox_tab {
        margin: 0 0.5rem 0 0;
        padding: 0;

        &:hover,
        &.active {
          border-bottom: 0;
        }
      }

    }
  }

  &.commentform {
    p {
      // margin-top: 10px;
      // margin-bottom: 10px;
      margin: 0;
      // display: none;
    }

    .commentbox_tab {
      color: var(--fg);

      &:hover,
      &.active {
        color: var(--fg-darker);
      }
    }

    .comment_svg {
      fill: var(--fg);

      &:hover {
        fill: var(--fg-darker);
      }
    }

    .comment_svg_stroke {
      stroke: var(--fg);

      &:hover {
        stroke: var(--fg-darker);
      }
    }

    #commentbox_opt {
      display: block;
      // margin-bottom: var(--gap);
      // padding: 0 var(--gap) var(--gap);
      padding: 12px var(--gap);
      border: 1px solid var(--divider);
      // background-color: rgba(0,0,0,.04);

      // .dark & {
      //   background-color: rgba(0,0,0,.15);
      // }

      .comment_btn {
        width: auto;
        height: auto;
        min-width: 2rem;
        margin: 0;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        border: 1px solid var(--accent);
        outline: none;
        background-color: var(--accent);

        font-weight: 700;
        font-size: 0.875rem;
        line-height: calc(1.5rem - 2px);
        text-align: center;
        text-decoration: none;
        color: #fff;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        user-select: none;
        cursor: pointer;

        transition: all 200ms;

        &:hover {
          background-color: var(--accent-dark);
          border-color: var(--accent-dark);
          // color: #fff;
        }

        &:active {
          opacity: .85;
        }
      }

      a {
        text-decoration: none;
        font-size: 0.875rem;
      }
    }

    #tip_comment2,
    #tip_comment2 ~ p {
      @extend [hidden];
    }
  }

  .commentbox_footer {
    @extend [hidden];
  }
}
